<template>
  <!-- 👉 Star -->
  <div class="flex gap-x-4 flex-wrap gap-y-2">
    <ABtn icon="i-bx-star">
      <span>Primary</span>
    </ABtn>

    <ABtn
      variant="outline"
      icon="i-bx-star"
    >
      <span>Primary</span>
    </ABtn>

    <ABtn
      variant="light"
      icon="i-bx-star"
    >
      <span>Primary</span>
    </ABtn>
    <ABtn
      variant="text"
      icon="i-bx-star"
    >
      <span>Primary</span>
    </ABtn>
  </div>

  <!-- 👉 Dollar Circle -->
  <div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
    <ABtn
      color="success"
      icon="i-bx-dollar-circle"
    >
      <span>Success</span>
    </ABtn>

    <ABtn
      color="success"
      variant="outline"
      icon="i-bx-dollar-circle"
    >
      <span>Success</span>
    </ABtn>

    <ABtn
      color="success"
      variant="light"
      icon="i-bx-dollar-circle"
    >
      <span>Success</span>
    </ABtn>

    <ABtn
      color="success"
      variant="text"
      icon="i-bx-dollar-circle"
    >
      <span>Success</span>
    </ABtn>
  </div>

  <!-- 👉 Heart -->
  <div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
    <ABtn
      color="danger"
      icon="i-bx-heart"
    >
      <span>Danger</span>
    </ABtn>

    <ABtn
      color="danger"
      variant="outline"
      icon="i-bx-heart"
    >
      <span>Danger</span>
    </ABtn>

    <ABtn
      color="danger"
      variant="light"
      icon="i-bx-heart"
    >
      <span>Danger</span>
    </ABtn>

    <ABtn
      color="danger"
      variant="text"
      icon="i-bx-heart"
    >
      <span>Danger</span>
    </ABtn>
  </div>
</template>
